<template>
	<view>
		<u-sticky :h5-nav-height="0" bg-color="#FFFFFF">
			<view class="u-flex header">
				<u-search placeholder="请输入要查询对内容" v-model="keyword" wrapBgColor="transparent" bg-color="#EEEEEE"
					@search="clearDatas" @clear="clearDatas"></u-search>
				<navigator url="/yixu/pages/service/index" hover-class="none" class="service u-padding-right-20">
					<image src="https://resource.lanbaozixun.com/uploads/images/20240920231257450612816.png"
						mode="widthFix" class="service"></image>
				</navigator>
			</view>
			<commonTab class="u-padding-bottom-10" :nowCurrent="1" style="box-shadow: 0 20rpx 20rpx #eee;"></commonTab>
		</u-sticky>
		<view class="main-content u-padding-top-25 u-margin-top-25 bg-white">
			<!-- 轮播图 -->
			<swipers :pid="13" height="250rpx" padding="0 30rpx"></swipers>
			<scroll-view class="classify-area u-padding-top-25 u-padding-bottom-25" scroll-x>
				<view class="u-flex">
					<view class="classify-item u-color-666666" @click="selectClassify(-1)"
						:class="{'classify-select':nowSelectClassifyKey == -1}">
						全部
					</view>
					<view v-for="(v,k) in classifyDatas" :key="k" @click="selectClassify(k)"
						:class="{'classify-select':nowSelectClassifyKey == k}" class="classify-item u-color-666666">
						{{v.name||''}}
					</view>
				</view>
			</scroll-view>
			<scroll-view :scroll-y="true" @scrolltolower="queryArticleListFun" class="bg-white article-area">
				<view v-for="(v,k) in articleData" :key="k" class="u-flex u-padding-30 article-item">
					<u-avatar mode="square" :src="userInfo.avatar" :size="81"></u-avatar>
					<view class="u-flex-1 u-padding-left-20">
						<view class="u-font-weight-500 lg" style="color: #58669B;">{{userInfo.nickname}}</view>
						<view class="nr content u-margin-top-15">
							<text>
								{{v.synopsis||''}}
							</text>
						</view>
						<view class="picture-area u-padding-15 u-margin-top-15" v-if="v.images">
							<u-image v-for="(item,index) in v.images" @click="previewImage(v.images,index)" :border-radius="10" :key="index" :src="item"
								:height="150" :lazy-load="true" :show-menu-by-longpress="true" :fade="true"
								duration="450"></u-image>
						</view>
						<view class="u-flex u-row-between u-margin-top-30">
							<view class="u-color-666666 u-flex-1 xs">
								<text class="u-padding-right-25">{{v.create_time||''}}</text>
								<text>已转发 {{v.transpond_count||0}}</text>
							</view>
							<button class="transpond-btn" @click="transpond(k)">
								<image src="https://resource.lanbaozixun.com/uploads/images/20240920231257a75500045.png"
									mode="widthFix" class="transpond-icon"></image>
							</button>
						</view>
					</view>
				</view>
			</scroll-view>
			<view v-if="articleData.length <= 0" class="u-padding-45">
				<u-empty text="暂无数据" mode="news" color="#909399" icon-color="#909399"></u-empty>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getArticleList,
		getCategoryList,
		updateArticleDatas
	} from '@/api/publicArticle'
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from '@/utils/tools'
	import commonTab from '@/yixu/pages/article_acquisition/components/common_tab.vue'
	export default {
		components: {
			commonTab
		},
		data() {
			return {
				page: 1,
				keyword: '',
				articleData: [],
				classifyDatas: [],
				nowSelectClassifyKey: -1,
				status: loadingType.LOADING,
			};
		},
		async onLoad() {
			let {
				code,
				data
			} = await getCategoryList({
				type: 3
			})
			this.classifyDatas = data;
			this.queryArticleListFun()
			this.getUser();
		},
		onReachBottom() {
			this.queryArticleListFun()
		},
		methods: {
			...mapActions(['getUser']),
			selectClassify(k) {
				this.nowSelectClassifyKey = k
				this.clearDatas()
			},
			clearDatas() {
				this.page = 1;
				this.articleData = [];
				this.status = loadingType.LOADING
				this.queryArticleListFun()
			},
			queryArticleListFun() {
				let requestParams = {
					type: 3,
					keyword: this.keyword,
					cid: this.$u.test.isEmpty(this.classifyDatas[this.nowSelectClassifyKey]) ? 0 : this.classifyDatas[
						this.nowSelectClassifyKey].id
				}

				loadingFun(getArticleList, this.page, this.articleData, this.status, requestParams).then(res => {
					if (res) {
						this.page = res.page;
						this.status = res.status
						this.articleData = res.dataList
					}
				})
			},
			async transpond(k) {
				let copyContent = this.articleData[k];
				uni.setClipboardData({
					data: copyContent.synopsis
				});
				await updateArticleDatas({
					id: copyContent.id,
					field: 'transpond_count'
				})
				this.articleData[k].transpond_count = parseInt(this.articleData[k].transpond_count) + 1;
			},
			previewImage(urls,current = 0) {
				uni.previewImage({
					urls,
					current,
					loop: true,
					showmenu: true,
					indicator: 'default',
				});
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100vh;
		background: #F2F2F2;
		// background: linear-gradient(to bottom, rgba(120, 201, 255, 1), rgba(156, 215, 255, 1) 13.69%, rgba(224, 242, 255, 1) 22.53%, rgba(255, 255, 255, 0));
		.main-content{
			border-radius: 30rpx 30rpx 0 0;
		}
		.header {
			background: #FFFFFF;
			// background: linear-gradient(to bottom, #7ac9ff, #88ceff);

			.service {
				width: 130rpx;
			}
		}

		.classify-area {
			margin: 0 35rpx;
			width: calc(100vw - 70rpx);


			.classify-item {
				color: #666666;
				flex-shrink: 0;
				padding: 8rpx 24rpx;
				display: inline-block;
				border-radius: 12rpx;
				margin-right: 16rpx;
				background: rgba(26, 26, 26, 0.06);
			}

			.classify-select {
				color: white;
				background: #2DAAFF;
			}
		}

		.picture-area {
			display: grid;
			grid-gap: 20rpx;
			grid-template-columns: 1fr 1fr 1fr;
		}

		.transpond-btn {
			line-height: 1;

			.transpond-icon {
				width: 140rpx;
				height: 50rpx;
			}
		}

		.article-item {
			align-items: stretch !important;
			border-bottom: 2rpx solid #F5F5F5;

			&:last-child {
				border-color: transparent;
			}
		}
	}
</style>